<template>
  <div class="error-page">
    <div class="content-con">
      <img :alt="code" :src="src">
      <div class="text-con">
        <h4>{{ code }}</h4>
        <h5>{{ title }}</h5>
        <span class="desc">{{ desc }}</span>
        <div class="back-btn-group">
          <el-button type="primary" round @click="backHome">返回首页</el-button>
          <el-button round @click="backPrev">返回上一页({{ second }}s)</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, onMounted, onUnmounted, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const second = ref(5)
let timer: number | undefined
defineProps<{
  code: string | number;
  title: string;
  desc: string;
  src: string;
}>()

const backHome = () => {
  router.replace({ path: '/' })
}
const backPrev = () => {
  router.back()
}

onMounted(() => {
  timer = setInterval(() => {
    if (second.value === 0) {
      backPrev()
    } else {
      second.value--
    }
  }, 1000)
})
onUnmounted(() => {
  timer && clearInterval(timer)
})
</script>

<style lang="less" scoped>
.error-page {
  width: 100%;
  height: 100%;
  .content-con {
    width: 100%;
    max-width: 700px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    transform: translate(-50%, -60%);
    img {
      width: 35%;
      max-width: 420px;
      height: 360px;
    }
    .text-con {
      width: 75%;
      margin-top: 60px;
      margin-left: 30px;
      h4 {
        left: 0;
        top: 0;
        font-size: 80px;
        font-weight: 700;
        color: #348EED;
      }
      h5 {
        left: 0;
        top: 100px;
        font-size: 18px;
        font-weight: 700;
        color: #67647D;

      }
      .desc {
        color: #67647D;
      }
    }
    .back-btn-group {
      margin-top: 15px;
      right: 0;
      bottom: 20px;
    }
  }
}
</style>
